<template>
  <div class="addVehicleAccess">
    <p class="formDate-title">新建车辆信息</p>
    <div class="formDate">
      <el-form label-position="right" :rules="rules" ref="ruleForm" label-width="100px" style="margin:30px 25%" :model="formLabelCar">
        <el-form-item label="车辆品牌:" prop="carBrand">
          <div class="select-carType">
            <el-select v-model="formLabelCar.carBrand" placeholder="请选择">
              <el-option label="大众" value="大众"></el-option>
              <el-option label="劳斯莱斯" value="劳斯莱斯"></el-option>
              <el-option label="玛莎拉蒂" value="玛莎拉蒂"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="车辆类型:" prop="carType">
          <div class="select-carType">
            <el-select v-model="formLabelCar.carType" placeholder="请选择">
              <el-option label="重卡" value="重卡"></el-option>
              <el-option label="QQ" value="QQ"></el-option>
              <el-option label="跑车" value="跑车"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="车架号:" prop="carFrameNo">
          <el-input v-model="formLabelCar.carFrameNo"></el-input>
        </el-form-item>
        <el-form-item label="车辆型号:" prop="carNumber">
          <el-input v-model="formLabelCar.carNumber"></el-input>
        </el-form-item>
        <el-form-item label="车辆颜色:" prop="carColor">
          <el-input v-model="formLabelCar.carColor"></el-input>
        </el-form-item>
        <el-form-item label="上传车辆图片:">
          <div class="upload_field">
            <label for="thumb"><i class="el-icon-plus" v-if="!imageUrl ? true : false"></i></label>
            <div class="upload_thumb" v-show="imageUrl ? true : false">
              <input ref="uploadRef" type="file" id="thumb" name="thumb" value="" accept="image/png" @change="uploading" style="display: none;" />
              <div class="upload_preview">
                <img class="upload_img" :src="imageUrl" />
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="formSubmit">
            <el-button class="submit" type="primary" @click="submit">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getItem } from '@/utils/store.js'
import { addCar } from '@/views/BasicServicesPark/api/vehicleAccess/add.js'
export default {
  data() {
    return {
      formLabelCar: {},
      imageUrl: '',
      rules: {
        carBrand: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        carType: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        carFrameNo: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        carNumber: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        carColor: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    uploading() {
      const that = this
      // 获取到文件的列表数组
      // console.log(this.$refs.uploadRef.files)
      var fileName = that.$refs.uploadRef.files[0].name
        .split('.')
        .slice(-1)
        .toString()
      // console.log(111)
      //限制文件格式
      switch (fileName) {
        case 'png':
          var reader = new FileReader()
          reader.onload = function(e) {
            // console.log(e)
            // var $img = $('<img/>')
            that.imageUrl = e.target.result
            console.log(that.imageUrl)
          }
          reader.readAsDataURL(that.$refs.uploadRef.files[0])
          break
        default:
          alert('请上传png格式图片')
          return
      }
    },
    async submit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.formLabelCar.imgs = [this.imageUrl]
          let companyId = getItem('USER_INFO').data.data.companyId
          this.formLabelCar.companyId = companyId
          const { data: res } = await addCar(this.formLabelCar)
          if (!res.code == 0) {
            this.$message({
              type: 'warning',
              offset: 200,
              message: `${res.msg}+添加失败`
            })
            return
          }
          this.$message({
            type: 'success',
            offset: 200,
            message: `添加车辆成功`
          })
          this.$router.back(-1)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.addVehicleAccess {
  margin: 100px;
  .formDate-title {
    color: rgb(147, 147, 147);
    padding-left: 40px;
    margin-bottom: 15px;
  }
  .formDate {
    width: 100%;
    border: 1px solid rgb(228, 228, 228);
    .select-carType {
      width: 100%;
      .el-select {
        width: 100%;
      }
    }
    .upload_field {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 130px;
      border: 1px dashed rgb(147, 147, 147);
      .upload_preview {
        width: 100%;
        .upload_img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .formSubmit {
      margin-bottom: 40px;
      position: relative;
      .submit {
        position: absolute;
        left: 30%;
      }
    }
  }
}
</style>
